<template>
  <div class="suggestion-container">
    <van-cell v-for="(val,index) in resultList" :key="index" icon="search" @click="$emit('search', val)">
      <span slot="title" v-html="heightlight(val)"></span>
    </van-cell>
  </div>
</template>

<script>
import { getSuggestions } from '@/api/search.js'
import { debounce } from 'lodash'
export default {
  // 定义属性
  data() {
    return {
      resultList:[]
    }
  },
  props: {
    keywords: {
      type:String,
      required:true
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {
    keywords: {
      handler: debounce(function(val) {
        // 请求接口
        if (val === '') return
        this.loadSuggestions(val)
      }, 200),
      immediate: true
    }
  },
  // 方法集合
  methods: {
    // 加载搜索建议
    async loadSuggestions(val) {
      const { data } = await getSuggestions(val)
      this.resultList = data.data.options
    },
    // 高亮显示的方法
    heightlight(val) {
      const regexp = new RegExp(this.keywords, 'gi')
      return val.replace(regexp, `<span style="color:red">${this.keywords}</span>`)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
  
</style>